Vue.component('xcchart_control_pie', {
  template: '<div><div ref="chart" style="width: 100%; height: 400px;"></div></div>',
  props: {
    value: {
      type: Object,
    },
    fieldfulljson: {
      type: Array,
    },
    xcform_id: {
      type: Number,
    }
  },
  data() {
    return {
      xcchart_base_xctitle:this.value['fieldjsonObj']['xcchart_base_xctitle'],
      xcchart_data_dim:this.value['fieldjsonObj']['xcchart_data_dim'],
      xcchart_data_facts:this.value['fieldjsonObj']['xcchart_data_facts'],
      control: {}
    };
  },
  created() {
    var that = this;
  },
  mounted() {
    var that = this;
    that.xinit();

  },
  methods: {
    xinit() {
      let that = this;

      const chartDom = this.$refs.chart;
      that.myChart = echarts.init(chartDom);
      that.setOptionDebounce(that.myChart)
    },
    setOptionDebounce(myChart) {
      let that = this;
      Fast.api.ajax({
        url: Fast.api.fixurl(Config.controlPath + "getXcchartOptions"),
        method: 'get',
        data: {
          xcform_id: that.xcform_id,
          __vModel__: that.value.__vModel__,
        }
      }, function (data, ret) {
        let dimlables = data.dimlables;
        let facts = data.facts;

        let serie_data = [];
        for (let index in dimlables) {
          serie_data.push({
            name: dimlables[index],
            value: facts[0][index],
          });
        }

        let serie = {
          name: that.xcchart_data_facts['values'][0]['name'],
          type: 'pie',
          radius: '50%',
          data: serie_data
        };

        const option = {
          title: {
            text: that.xcchart_base_xctitle.value
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          label: {
            show: true,
            formatter: '{b}: {c}',
          },
          series: [serie],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        };
        myChart.setOption(option);

        return false;
      });
    }
  }
});